<template>
  <div id="baidu" class="container">
    <div class="content data">
      <div class="left">
        <h6>{{ $t('网站数据') }}</h6>
        <div class="dataBox box">
          <div class="card">
            <div class="cardTitle">
              <i />
              <span>{{ $t('运行天数') }}</span>
            </div>
            <p>{{ controlData.total_day }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="webs" />
              <span>{{ $t('总站点数') }}</span>
            </div>
            <p>{{ controlData.site_count }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="visitors" />
              <span>{{ $t('总访客数') }}</span>
            </div>
            <p>{{ controlData.visit_count }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="articles" />
              <span>{{ $t('文章数') }}</span>
            </div>
            <p>{{ controlData.article_count }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="keywords" />
              <span>{{ $t('关键词数') }}</span>
            </div>
            <p>{{ controlData.keyword_count }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="inquirys" />
              <span>{{ $t('总询盘数') }}</span>
            </div>
            <p>{{ controlData.inquiry_count }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="links" />
              <span>{{ $t('导入链接数') }}</span>
            </div>
            <p>{{ controlData.in_link_count }}</p>
          </div>
          <div class="card">
            <div class="cardTitle">
              <i class="outlinks" />
              <span>{{ $t('导出链接数') }}</span>
            </div>
            <p>{{ controlData.out_link_count }}</p>
          </div>
        </div>
      </div>
      <div class="right">
        <h6>
          {{ $t('版本信息') }}
          <span class="current">当前网站</span>
        </h6>
        <div class="version box">
          <h5>{{ controlData.website_title }}</h5>
          <ul>
            <li>
              <label>{{ $t('授权编号') }}</label>
              <span v-if="controlData.auth_info == null">
                {{ $t('暂未授权') }}
              </span>
              <span v-else>{{ controlData.auth_info.auth_num }}</span>
            </li>
            <li>
              <label>{{ $t('被授权人') }}</label>
              <span v-if="controlData.auth_info == null">无</span>
              <span v-else>{{ controlData.auth_info.company }}</span>
            </li>
            <li>
              <label>{{ $t('当前版本') }}</label>
              <span>{{ controlData.version }}</span>
            </li>
            <li>
              <label>{{ $t('系统官网') }}</label>
              <span>
                <a href="http://www.huocms.com" target="_blank">
                  www.huocms.com
                </a>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Application :dialog.sync="appDialog" :title="dialogTitle" />
    <div class="content sem">
      <div class="left">
        <el-radio-group v-model="radio" class="radioGroup">
          <el-radio-button :label="1">{{ $t('功能导航') }}</el-radio-button>
          <el-radio-button :label="2">{{ $t('应用导航') }}</el-radio-button>
        </el-radio-group>
        <div v-if="radio == 1" class="function-nav-box">
          <ul class="quick-nav-box">
            <li class="quick-nav" v-for="item in functionNav1" :key="item.id">
              <router-link :underline="false" :to="item.path" class="function-item">
                <i class="el-icon-tickets icon"></i>
                <div class="nav-content">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.desc }}</p>
                </div>
              </router-link>
            </li>
          </ul>
          <ul class="quick-nav-box">
            <li class="quick-nav" v-for="item in functionNav2" :key="item.id">
              <router-link :underline="false" :to="item.path" class="function-item">
                <i class="el-icon-tickets icon"></i>
                <div class="nav-content">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.desc }}</p>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="app-nav-box" v-else>
          <ul class="quick-nav-box">
            <li class="quick-nav" v-for="item in applicationNav1" :key="item.id">
              <div v-if="item.type == 'link'" @click="getOpen(item.href)" class="function-item">
                <div class="app-icon">
                  <img :src="require('@/icons/' + item.src + '.png')" alt="" />
                </div>
                <div class="nav-content">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.desc }}</p>
                </div>
              </div>
              <div v-else @click="openAppDialog(item)" class="function-item">
                <div class="app-icon">
                  <img :src="require('@/icons/' + item.src + '.png')" alt="" />
                </div>
                <div class="nav-content">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.desc }}</p>
                </div>
              </div>
            </li>
          </ul>
          <ul class="quick-nav-box">
            <li class="quick-nav" v-for="item in applicationNav2" :key="item.id">
              <div v-if="item.type == 'link'" @click="getOpen(item.href)" class="function-item">
                <div class="app-icon">
                  <img :src="require('@/icons/' + item.src + '.png')" alt="" />
                </div>
                <div class="nav-content">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.desc }}</p>
                </div>
              </div>
              <div v-else @click="openAppDialog(item)" class="function-item">
                <div class="app-icon">
                  <img :src="require('@/icons/' + item.src + '.png')" alt="" />
                </div>
                <div class="nav-content">
                  <h5>{{ item.title }}</h5>
                  <p>{{ item.desc }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="right">
        <h6>
          {{ $t('询盘') }}
          <span class="more" @click="goInquiry">
            {{ $t('更多') }}
            <i class="el-icon-arrow-right"></i>
          </span>
        </h6>
        <ul v-if="inquiryList.length > 0" class="inquiry">
          <li v-for="item in inquiryList" :key="item.id">
            <el-link :underline="false" target="_blank" @click="goInquiry">
              {{ item.content }}
            </el-link>
            <span>{{ item.create_time }}</span>
          </li>
        </ul>
        <el-empty v-else :description="$t('暂无询盘数据')" :image-size="90" />
      </div>
    </div>
    <div class="content trend">
      <div class="left half">
        <h6>
          {{ $t('趋势图') }}
          <span>
            <el-select v-model="tabPosition" size="small" @change="changeTime">
              <el-option :label="$t('今天')" value="1" />
              <el-option :label="$t('昨天')" value="2" />
              <el-option :label="$t('最近7天')" value="3" />
              <el-option :label="$t('最近30天')" value="4" />
            </el-select>
            <el-select v-model="searchForm.site_id" size="small" :placeholder="$t('请选择站点')" style="margin-left: 20px"
              @change="handleChange">
              <el-option v-for="item in options" :key="item.site_id" :label="item.domain" :value="item.site_id" />
            </el-select>
          </span>
        </h6>
        <div class="bar box" style="margin-top: 1px">
          <Trend v-if="searchForm.site_id" :type="type" :site-id="searchForm.site_id" />
          <el-empty v-else :description="$t('暂无数据')" />
        </div>
      </div>
      <div class="right half">
        <h6>{{ $t('地域分布') }}</h6>
        <div ref="echart" class="bar">
          <Map v-if="searchForm.site_id" :site-id="searchForm.site_id" :type="type" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Map from './components/mapChart'
import Trend from './components/trendChart.vue'
import Application from './components/Application.vue'
import websiteApi from '@/api/website'
import inquiryApi from '@/api/inquiry'
import controlApi from '@/api/control'
export default {
  components: { Trend, Map, Application },
  data() {
    return {
      dialogTitle: '',
      appDialog: false,
      radio: 1,
      searchForm: {
        domain: '',
        site_id: ''
      },
      siteId: '',
      tabPosition: '1',
      show: false,
      lineData: [], // 今日流量
      keywordsData: [], // Top10关键词
      visitPage: [], // 受访页面
      landingPage: [], // 入口页面
      sourceSite: [], // 来源网站页面
      newVisitor: [], // 新用户
      oldVisitor: [], // 老用户
      type: 1, // 时间段的类型
      options: [],
      inquiryList: [], // 询盘数据
      website_id: '',
      controlData: [], // 控制面板数据
      website: [],
      applicationNav1: [
        {
          id: 1,
          title: 'Suwork',
          type: 'dialog',
          dialogTitle: this.$t('Suwork配置'),
          src: 'suwork',
          desc: 'Suwork帮助企业负责人统筹管理数据，科学决策，即时了解企业的客户、项目、人事和财务信息。'
        },
        {
          id: 2,
          title: this.$t('百度翻译'),
          type: 'dialog',
          dialogTitle: this.$t('百度翻译配置'),
          src: 'yi',
          desc: '百度翻译提供即时免费200+语言翻译服务，拥有网页、APP、API产品，支持文本翻译、文档翻译、图片翻译等特色功能，满足用户查词翻译、文献翻译、合同翻译等需求，随时随地沟通全世界'
        },
        {
          id: 3,
          title: 'Sitemap',
          type: 'dialog',
          dialogTitle: this.$t('SitemMap配置'),
          src: 'sitemap',
          desc: 'Sitemap 可方便网站管理员通知搜索引擎他们网站上有哪些可供抓取的网页。最简单的Sitemap 形式，就是XML文件，在其中列出网站中的网址以及关于每个网址的其他元数据（上次更新的时间、更改的频率以及相对于网站上其他网址的重要程度为何等），以便搜索引擎可以更加智能地抓取网站'
        },
        {
          id: 4,
          title: this.$t('关键词排名'),
          type: 'dialog',
          dialogTitle: this.$t('关键词排名查询配置'),
          src: 'zhanzhang',
          desc: '站长之家(中国站长站)为个人站长与企业网络提供全面的站长资讯、源代码程序下载、海量建站素材、强大的搜索优化辅助工具、网络产品设计与运营理念以及一站式网络解决方案，十年来我们一直致力为中文网站提供动力'
        }
      ], //应用导航
      applicationNav2: [
        {
          id: 5,
          title: this.$t('词爪'),
          type: 'dialog',
          dialogTitle: this.$t('词爪配置'),
          src: 'cizhua',
          desc: '词爪在线违禁词查询工具，整理目前新广告法中违禁词，极限词，敏感词等各种违规词，提供多种查询方式：文字、图片、链接地址、文档；细分行业20个以上，更快提醒您文章中出现的违禁词/禁用词，降低处罚违规风险'
        },
        {
          id: 6,
          title: this.$t('阿里短信'),
          type: 'dialog',
          dialogTitle: this.$t('阿里短信'),
          src: 'ali',
          desc: ' 阿里云信使是一家正规sms短信平台服务商,致力短信接口通道应用,主要提供企业短信,短信验证码接口,短信平台二次开发,短信接口,短信应用,短信通知等服务'
        },
        {
          id: 7,
          title: this.$t('词爪创作'),
          type: 'link',
          href: 'https://www.cizhua.cn/',
          src: 'ali',
          desc: '词爪是免费的违禁词查询工具。用户注册之后可以便捷的查询文案中是否有违反广告法和平台规定的用词。'
        },
        {
          id: 8,
          title: this.$t('信爪'),
          type: 'link',
          href: 'https://www.xinzhua.com/',
          src: 'ali',
          desc: '信爪搜索作为一个企业服务垂直搜索引擎，立足于为企业提供优质的搜索服务，网站只收录企业官网的相关服务页面，以便于用户更快的找到自己所需要的服务。未来，信爪还会结合人工智能算法，分析和理解用户可能的查询意图，未企业提供更加精确的搜索结果返回，帮助企业用户快速找到需要并且可靠的服务信息。'
        }
      ],
      functionNav1: [
        {
          id: 1,
          title: this.$t('栏目管理'),
          desc: this.$t('管理网站栏目结构'),
          path: '/Category/index'
        },
        {
          id: 2,
          title: this.$t('栏目内容'),
          desc: this.$t('编辑和发布栏目内容'),
          path: '/Content/index'
        },
        {
          id: 3,
          title: this.$t('网站设置'),
          desc: this.$t('自定义网站全局设置'),
          path: '/WebsiteSetting/index'
        },
        {
          id: 4,
          title: this.$t('前台菜单'),
          desc: this.$t('管理和设置网站前台的导航菜单'),
          path: '/NavCate/index'
        }
      ], //功能导航
      functionNav2: [
        {
          id: 5,
          title: this.$t('海报管理'),
          desc: this.$t('自定义网站广告海报'),
          path: '/poster/index'
        },
        {
          id: 6,
          title: this.$t('友情链接'),
          desc: this.$t('管理和维护与其他网站的友好关系'),
          path: '/Link/index'
        },
        {
          id: 7,
          title: this.$t('系统设置'),
          desc: this.$t('系统级别设置选项'),
          path: '/SysSetting/index'
        },
        {
          id: 8,
          title: this.$t('附件管理'),
          desc: this.$t('统一管理网站附件文件'),
          path: '/AttachmentCate/index'
        }
      ]
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val) {
      this.website_id = val
      this.getInquiry()
      this.getWebsite()
      this.getWebList()
    }
  },
  created() {
    this.searchForm.site_id = this.$store.getters.siteId
    this.website_id = this.$store.getters.siteId
    if (this.website_id) {
      this.getInquiry()
    }
    this.getWebList()

    if (this.website_id || this.website_id == '') {
      this.getWebsite()
    }
  },
  methods: {
    // 应用导航新窗口打开
    getOpen(href) {
      window.open(href)
    },
    // 打开应用配置
    openAppDialog(item) {
      this.dialogTitle = item.dialogTitle
      this.appDialog = true
    },
    getWebsite() {
      websiteApi.websiteList().then(res => {
        this.website = res.data
        var a = ''
        this.website.forEach(el => {
          if (el.id == this.website_id) {
            a = el.domain
          } else if (el.children.length > 0) {
            el.children.forEach(item => {
              if (item.id == this.website_id) {
                a = item.domain
              }
            })
          }
        })
        this.getControl(a)
      })
    },
    getControl(a) {
      controlApi.dashboard({ domain: a }).then(res => {
        this.controlData = res.data
      })
    },
    // 跳转到询盘列表
    goInquiry() {
      this.$router.push({ name: 'Inquiry' })
    },
    // // 获取首页统计站点列表
    getWebList() {
      websiteApi.indexLists().then(res => {
        if (res.code == 0) {
          this.options = res.data
          this.searchForm.site_id = this.$store.getters.siteId
        }
      })
    },
    // // 切换站点
    handleChange(val) {
      this.searchForm.site_id = val
    },
    // 切换时间段
    changeTime(val) {
      this.type = val
    },

    // 询盘列表
    getInquiry() {
      inquiryApi.inquiryList({ website_id: this.website_id }).then(res => {
        if (res.code == 0) {
          if (res.data.length > 5) {
            this.inquiryList = res.data.splice(0, 5)
            this.inquiryList.reverse()
          } else {
            this.inquiryList = res.data
            this.inquiryList.reverse()
          }
        }
      })
    },
    goOpt() {
      this.$router.push({ name: 'OperationLog' })
    }
  }
}
</script>

<style lang="scss">
#baidu.container {
  .el-link.el-link--default:hover {
    color: var(--huocms-com-color-primary);
  }
}

.radioGroup {
  line-height: 22px !important;

  .el-radio-button__inner {
    border: none !important;
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    font-family: 'MicrosoftYaHeiLight';
    color: var(--color-secondary);
    padding: 0 16px 0 0;
  }

  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: transparent;
    box-shadow: none;
    color: var(--suq-cn-color-title);
  }
}
</style>
<style scoped lang="scss">
h6 {
  font-size: 16px;
  color: var(--suq-cn-color-title);
  line-height: 22px;
  font-weight: bold;
  font-family: 'MicrosoftYaHeiLight';
  padding-bottom: 16px;
  position: relative;

  span {
    position: absolute;
    right: 0;
    top: 0;
  }

  span.current {
    background-color: rgba(255, 125, 0, 0.1);
    border-radius: 2px;
    width: 68px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    color: var(--color-warning);
    font-size: 14px;
    font-weight: 400;
  }

  span.more {
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    color: var(--color-secondary);
    cursor: pointer;

    i {
      color: var(--color-secondary);
    }
  }
}

.content {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  min-width: 1250px;

  // overflow-x: auto;
  .left {
    width: calc(66% - 20px);
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    height: 100%;

    @media (max-width: 1200px) {
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .right {
    width: calc(34%);
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    height: 100%;

    @media (max-width: 1200px) {
      width: 100%;
      margin-bottom: 20px;
    }
  }

  .half {
    width: calc(50% - 10px);
  }
}

.content.data {
  .left {
    padding-bottom: 0;
  }

  .right {
    .version {
      h5 {
        font-size: 18px;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: var(--suq-cn-color-title);
        line-height: 25px;
        margin-bottom: 18px;
      }

      ul {
        background-color: #f5f5f9;
        border-radius: 4px;
        padding: 16px;
      }

      li {
        width: 100%;
        margin-bottom: 13px;

        label,
        span {
          display: inline-block;
          line-height: 22px;
          font-size: 14px;
          font-family: 'MicrosoftYaHeiLight';
        }

        label {
          width: 160px;
          font-weight: normal;
          color: var(--color-secondary);
        }

        span {
          width: calc(100% - 170px);
          white-space: nowrap;
          text-overflow: ellipsis;
          color: var(--suq-cn-color-title);
          text-align: right;
        }
      }
    }
  }
}

.dataBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .card {
    width: calc(25% - 12px);
    height: 100px;
    margin-bottom: 16px;
    border-radius: 6px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #f5f5f9;

    .cardTitle {
      margin-bottom: 16px;
      display: flex;
      align-items: center;

      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: var(--color-secondary);
        line-height: 22px;
      }

      i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--huocms-com-color-primary);
        display: block;
        margin-right: 8px;
      }

      i.webs {
        background-color: #f39d0a;
      }

      i.visitors {
        background-color: #0fb87f;
      }

      i.articles {
        background-color: #89bf16;
      }

      i.keywords {
        background-color: #b03dfd;
      }

      i.inquirys {
        background-color: #566aff;
      }

      i.links {
        background-color: #15b3f1;
      }

      i.outlinks {
        background-color: #37ccba;
      }
    }

    p {
      font-size: 24px;
      font-family: SFProText-Medium, SFProText;
      font-weight: 500;
      color: var(--suq-cn-color-title);
      line-height: 32px;
    }
  }
}

.function-nav-box {
  margin-top: 16px;
}

.app-nav-box {
  margin-top: 16px;
}

.quick-nav-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  // .quick-nav:nth-child(n + 5) {
  //   margin-bottom: 11px;
  // }
  .quick-nav:last-child {
    .function-item {
      justify-content: flex-end;
    }
  }

  .quick-nav {
    width: 25%;
    height: 100px;
    box-sizing: border-box;
    padding: 21px 9px;
    margin-bottom: 16px;
    max-width: 24%;
    min-width: 165px;

    .function-item {
      display: flex;
      align-items: center;
      cursor: pointer;

      .nav-content {
        text-align: left;

        h5 {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: var(--suq-cn-color-title);
          line-height: 22px;
        }

        p {
          color: var(--color-secondary);
          font-size: 12px;
          margin-top: 2px;
          line-height: 17px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }

    i {
      font-size: 28px;
      color: var(--huocms-com-color-primary);
      background-color: #f5f5f9;
      padding: 10px;
      border-radius: 4px;
      margin-right: 9px;
    }

    .app-icon {
      width: 48px;
      height: 48px;
      margin-right: 9px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .nav-content {
      flex: 1;
    }
  }
}

.content.sem {
  height: 286px;
}

.content.trend {
  height: 500px;
}

.content.inquiryAndopt {
  margin-bottom: 60px;
}

.inquiry {
  height: 100%;

  li {
    height: 22px;
    line-height: 22px;
    color: #666;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 16px;

    .el-link {
      line-height: 22px;
      font-size: 14px;
      display: inline-block;
      width: calc(100% - 200px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    span {
      color: #666;
      font-size: 13px;
    }
  }
}

.bar {
  width: 100%;
  margin-top: -20px;
}
</style>
